import React from "react";
import { Button,Spin } from 'antd';
import { inject, observer } from "mobx-react";
import {WeaTableNew, WeaSwitch} from 'comsMobx';
import { WeaRightMenu,WeaTop,WeaTab,WeaLeftRightLayout,WeaAlertPage,WeaLocaleProvider,WeaFormItem,WeaProgress} from 'ecCom';
import { TaskViewUrl } from '../../constants/task';
import TaskAnalyseCount from "./task-analyse-count"
import route from '../../constants/route';
const WeaTable = WeaTableNew.WeaTable;
import TaskTypeList from './TaskTypeList';
import Condition from './Condition';
import './index.less';
const getLabel = WeaLocaleProvider.getLabel;
@inject("taskMonitorStore")
@observer
export default class TaskMonitor extends React.Component{
    constructor(props) {
        super();
        this.store = props.taskMonitorStore;
    }
  
    componentDidMount() {
        const { taskMonitorStore: store } = this.props;
        store.init();
        window.openEdcTaskFromTaskList = this.openTask
        window.openEdcTaskViewFromTaskList = this.openTaskView
    }

    componentWillReceiveProps(nextProps) {
        const { location: { key } } = this.props;
        const { location: { key: nextKey} } = nextProps;//
        if (key !== nextKey) {
            this.store.init();
        }
    }

    openTask = (id, nodeid,loadRoute='') => {
        const { location: { query: params } } = this.props;
        window.open(`${TaskViewUrl}#/${route.view}/${loadRoute}?taskid=${id}&nodeid=${nodeid}&userid=${params.userid || ''}`);
    }
    openTaskView = (id) => {
        const { location: { query: params } } = this.props;
        window.open(`${TaskViewUrl}#/${route.view}?taskid=${id}&userid=${params.userid || ''}`);
    }

    getButtonsAdQuick = (isAd) => [
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c1uclz@search`} type="primary">搜索</Button>,
        ...(isAd ? [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ti4zny@reset`} type="ghost">重置</Button>, <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6yh2t9@cancel`} type="ghost">取消</Button>] : []),
      ]

    getSearchsAdQuick = (isAd) => {
        const {taskMonitorStore:store} = this.props;
        const conditionsQk = [{
            title: getLabel('505990', '常用条件'),
            defaultshow: true,
            items: [
                {
                    colSpan: 2,
                    fieldcol: 12,
                    labelcol: 6,
                    conditionType: "SELECT",
                    options: [{
                        key: "0",
                        showname: getLabel('507383', '全部'),
                        selected: true
                    }, {
                        key: "1",
                        showname: getLabel('520902', '进行中')
                    }, {
                        key: "2",
                        showname: getLabel('520903', '已完成')
                    }
                    ],
                    domkey: [
                        'taskStaus',
                    ],
                    label: getLabel('520904', '任务状态'),
                    viewAttr: 2
                }, {
                    colSpan: 2,
                    conditionType: "INPUT",
                    domkey: [
                        "taskName"
                    ],
                    fieldcol: 12,
                    label: getLabel('505991', '标题'),
                    labelcol: 6,
                    value: "",
                    viewAttr: 2
                }, {
                    colSpan: 2,
                    conditionType: "BROWSER",
                    domkey: [
                        "creator"
                    ],
                    fieldcol: 12,
                    label: getLabel('505993', '发起人'),
                    labelcol: 6,
                    value: "",
                    viewAttr: 2,
                    browserConditionParam: {
                        completeParams: {},
                        conditionDataParams: {},
                        dataParams: {},
                        destDataParams: {},
                        hasAddBtn: false,
                        hasAdvanceSerach: true,
                        idSeparator: ",",
                        isAutoComplete: 1,
                        isDetail: 0,
                        isMultCheckbox: false,
                        isSingle: false,
                        pageSize: 10,
                        quickSearchName: "",
                        replaceDatas: [],
                        title: getLabel('505994', '人力资源'),
                        type: "17",
                        viewAttr: 2
                    },
                },
                {
                    colSpan: 4,
                    fieldcol: 12,
                    labelcol: 6,
                    conditionType: "SELECT_LINKAGE",
                    selectLinkageDatas: {
                        "6": {
                            conditionType: "RANGEPICKER",
                            domkey: [
                                "taskstart",
                                "taskend"
                            ]
                        }
                    },
                    options: [{
                        key: "0",
                        showname: getLabel('507383', '全部'),
                        selected: true
                    }, {
                        key: "1",
                        showname: getLabel('505995', '今天')
                    }, {
                        key: "2",
                        showname: getLabel('505996', '本周')
                    }, {
                        key: "3",
                        showname: getLabel('505997', '本月')
                    }, {
                        key: "5",
                        showname: getLabel('506002', '本年')
                    }, {
                        key: "7",
                        showname: getLabel('505998', '上个月')
                    }, {
                        key: "8",
                        showname: getLabel('505999', '上一年')
                    }, {
                        key: "6",
                        showname: getLabel('506000', '指定日期范围')
                    }
                    ],
                    domkey: [
                        "taskDate",
                        "createDate"
                    ],
                    label: getLabel('520901', '发起时间'),
                    viewAttr: 3
                }
            ]
        }];
        return store.conditionQkForm.isFormInit ? (
        
        conditionsQk[0].items.map((field, index) => (
           <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@z3tq77@${index}`}
          label={`${field.label}`}
          labelCol={{span: `${field.labelcol}`}}
          wrapperCol={{span: `${field.fieldcol}`}}
          
        >
               <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@2ewtsv@${index}`} fieldConfig={field} form={store.conditionQkForm} onChange={()=>store.initTable()}/>
        </WeaFormItem>
      ))) : null

    //   console.log(ads);
    //   return null;
        }

        reRenderColumns(columns){
            let that = this;
            const store = that.props.contractTypeStore;
            columns.forEach((c, i)=>{
                
                if(c.dataIndex=='taskprocess'){
                    c.render = function(text, record){
                        console.log(record,"dataIndex")
                        let percent = record.taskprocessspan||text;
                        let precounts = record.contract_quantity_target||0;
                        //let percent=95;
                        //return <span><Progress percent={percent} title={`${percent}%`} status={parseInt(percent) >= parseInt(90) ? 'exception' : 'active'}></Progress> </span>
                        return <span><WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@540m03@${i}`} percent ={percent}/></span>
                        
                    }
                }
            })
            return columns;
        }


    render(){
        const {taskMonitorStore:store} = this.props
        const {tableStore,isRight,loading} = this.store;
        const menu = [{
            key: '1',
            icon: <i className='icon-coms-search' />,
            content: getLabel('388113', '搜索'),
            onClick: store.search,
        },{
            key: '2',
            icon: <i className='icon-coms-delete' />,
            content: getLabel(502286, '删除'),
            onClick: store.deleteTask,
        }];
        if (loading) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4o2pbe`} size="large"/></div>
        }
        if (!isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@p4c9gc`}><div>{getLabel('506009','暂无权限')}</div></WeaAlertPage>
        }

        return(
            <div className=''>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@hwuj0q`}
                    datas={menu}>
                    <div style={{ backgroundColor: '#fff' }}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@76jefh`}
                            title={getLabel('510795','任务监控')}
                            iconBgcolor='#1a57a0'
                            icon={<i className='icon-coms02-Data-center' />}
                            loading={tableStore.loading}
                            showDropIcon={true}
                            dropMenuDatas={menu}
                            >
                            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@nle4rg`}
                                leftWidth={300}
                                leftCom={<TaskTypeList ecId={`${this && this.props && this.props.ecId || ''}_TaskTypeList@t6jwak`} store={store} />}
                            >
                            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@zxpyiy`}
                                className ="wea-tab-monitor"
                                keyParam="key"  //主键
                                countParam="key"
                                //searchType={['advanced']}
                                onSearch={store.quickSearch}
                                onSearchChange={store.changeQuickSearchValue}
                                searchsAdQuick={this.getSearchsAdQuick()}
                                searchsBaseValue={store.quickSearchValue}
                                showSearchAd={store.conditionVisible}
                                setShowSearchAd={store.setConditionVisible}
                                buttonsAd={this.getConditionButtons()}
                                //searchsAd={<Condition store={store} />}
                            />
                            <TaskAnalyseCount ecId={`${this && this.props && this.props.ecId || ''}_TaskAnalyseCount@8tw427`} datas={store.conutData} setListModalVisible = "true"></TaskAnalyseCount>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@h753vh`} comsWeaTableStore={tableStore}
                                getColumns={c => this.reRenderColumns(c)}
                                register_table={()=>store.reloadTable }
                                needScroll={true}
                                hasOrder={true}
                                // uniqueId={true}
                            />
                            </WeaLeftRightLayout>
                        </WeaTop>
                    </div>
                </WeaRightMenu>
            </div>
        )
    }
    getConditionButtons = () => {
        const { taskMonitorStore:store } = this.props;
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2q63ji@search`} type="primary" onClick={store.search}>{getLabel('506011','搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@g26zzr@reset`} type="ghost" onClick={store.clearCondition}>{getLabel('506012','重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4muoji@cancel`} type="ghost" onClick={store.setConditionVisible.bind(this, false)}>{getLabel('506013','取消')}</Button>)
        ]
    }

}